<template>
  <!-- 主体部分 -->
  <section class="main">
    <!-- 全选反选按钮 -->
    <!-- 6：反选的 用到计算属性而且是完整的写法 -->
    <input  
    v-model="all"
    id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <!-- 2:加删除线类名 但子组件改不了要向父组件申请-->
      <li v-for="item in list" 
      :class="{completed:item.done}"
      :key="item.id">
        <div class="view">
          <!-- 这里可以用v-model但不推荐，是因为引用item，done是引用类型，改了里面的属性，但地址没变，v-model默认没改变
          checked=“是单向的” -->
          <!-- 4:改变状态，完成了就有划线 -->
          <input  class="toggle" type="checkbox" 
          @change="$emit('change-event',item.id)"
          :checked="item.done"/>
          <!-- 1：子组件拿到数据可以用了 -->
          <label>{{item.name}}</label>
          <!-- 3：实现点击清除已经删除项，删除，点击事件 但数据是父组件，要发申请 让父组件改 -->
          <button class="destroy" @click="$emit('handle-event',item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  // 1：子组件通过props接收数据
  props:{
    list:{
      // 传的是数组
      type:Array,
      required:true,//必须项校验 
    },
  },
      // 6:计算属性在computed里面写
    computed:{
      all:{
        
        // 获取
        // 让数据的length === 选中的length就是全选
        get(){
          console.log(1)
          // return this.list.filter(item=>item.done === true).length === this.list.length
          // 第二种every
          return this.list.every(item => item.done === true)
        },
        // 修改
        set(value){
          // 这里不能修改要让父组件修改内容
          this.$emit('all-event',value)
        }
      }
    }
}
</script>

<style></style>
